<template>
  <div
    class="container-box connect-testing q-ma-md flex q-pa-md"
    style="height: 100%"
  >
    <div class="test-part">
      <q-btn
        class="test-btn q-mb-md"
        label="检测"
        round
        type="submit"
        color="primary"
      />
      <div class="test-state">
        检测状态 <q-icon name="check" color="green" size="sm"></q-icon>
        <q-icon name="close" color="red" size="sm"></q-icon>
        <q-circular-progress
          show-value
          class="text-light-blue q-ma-md"
          :value="loadingValue"
          size="40px"
          color="light-blue"
        />
      </div>
      <div class="q-pa-md" style="width: 220px">
        <q-table
          class="my-sticky-header-table"
          :rows="testTableRows"
          :columns="testTableColumns"
          row-key="index"
          virtual-scroll
          v-model:pagination="pagination"
          :rows-per-page-options="[0]"
          flat
        />
      </div>
    </div>
    <div class="readFeedback" style="height: 100%">
      <div style="text-align: right">
        <q-btn label="读取液滴反馈" class="q-mr-md" color="primary" />
        <q-btn label="读取自动化测试结果" color="primary" />
      </div>
      <div class="resultBox q-mt-md"></div>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  name: "ConnectTesting",
  setup() {
    const testTableColumns = [
      {
        name: "index",
        label: "#",
        field: "index",
      },
      {
        name: "fft",
        label: "FFT",
        field: (row) => row.fft,
      },
      {
        name: "value",
        label: "模值",
        field: "value",
      },
    ];
    let testTableRows = [
      {
        fft: 111,
        value: 0,
      },
      {
        fft: 222,
        value: 1,
      },
      {
        fft: 333,
        value: 1,
      },
      {
        fft: 44,
        value: 0,
      },
      {
        fft: 55,
        value: 1,
      },
      {
        fft: 66,
        value: 1,
      },
    ];
    testTableRows.forEach((testTableRows, index) => {
      testTableRows.index = index;
    });
    const loadingValue = 50;
    return {
      testTableColumns,
      testTableRows,
      loadingValue,
    };
  },
};
</script>

<style lang="scss">
.test-part {
  margin-right: 20px;
  border-right: 2px solid #ddd;
}
.test-btn {
  height: 80px;
  width: 80px;
  font-size: 22px;
}
.my-sticky-header-table {
  height: 400px;
  .q-table__top,
  .q-table__bottom,
  thead tr:first-child th {
    background-color: #fff;
  }
  thead tr th {
    position: sticky;
    z-index: 1;
  }
  thead tr:first-child th {
    top: 0;
  }
  tbody tr,
  tbody td {
    height: 20px;
  }
}
.readFeedback {
  width: 70%;
  .resultBox {
    height: 500px;
    background-color: #f2f2f2;
  }
}
</style>
